<!--
 * @Author       : 刘洋 liuy5335@163.com
 * @Date         : 2025-01-25 10:58:34
 * @LastEditors  : 刘洋 liuy5335@163.com
 * @LastEditTime : 2025-02-13 14:51:54
 * @FilePath     : \zhly-vform\src\components\form-designer\setting-panel\property-editor\field-common\keyName-editor.vue
 * @Description  : 介绍文件的作用
 * 
 * Copyright (c) 2025 by zhlx - liuy5335@163.com, All Rights Reserved. 
-->
<template>
  <el-form-item v-if="optionModel.keyNameEnabled && !selectedWidget.nameReadonly">
    <template #label>
      <span>{{ i18nt('designer.setting.keyName') }}
        <el-tooltip effect="light" :content="i18nt('designer.setting.keyNameHelp')">
          <svg-icon icon-class="el-info" /></el-tooltip>
      </span>
    </template>
    <el-input type="text" v-model="optionModel.keyName" @change="updateWidgetKeyNameAndRef"></el-input>
  </el-form-item>
</template>

<script>
import i18n from "@/utils/i18n"
import SvgIcon from "@/components/svg-icon/index.vue"
import {isEmptyStr} from "@/utils/util"

export default {
  name: "keyName-editor",
  mixins: [i18n],
  components: {
    SvgIcon
  },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  watch: {
    // selectedWidget: {
    //   handler(val, oldVal) {
    //     if (!val) {
    //       return
    //     }
    //
    //     if (val.options.keyNameEnabled && !val.options.keyName) {
    //       val.options.keyName = val.options.name
    //     }
    //   },
    //   immediate: true
    // },

  },
  methods: {
    updateWidgetKeyNameAndRef(newName) {
      let oldName = this.designer.selectedWidgetName
      if (isEmptyStr(newName)) {
        this.selectedWidget.options.keyName = oldName
        this.$message.info(this.i18nt('designer.hint.nameRequired'))
        return
      }
      if (!!this.designer.formWidget) {
        const formDomainData = JSON.parse(window.localStorage.getItem('widget__list__dataDomain')) || [] //数据域
        const nameFind = formDomainData.filter(item => item.options.keyName === newName).length > 1;
        if (!!nameFind) {
          this.selectedWidget.options.keyName = ""
          this.$message.info(this.i18nt('designer.setting.keyName') + newName + '已存在！')
          return
        }
      }
    },
  }

}
</script>

<style lang="scss" scoped></style>
